<template>
  <div>
    <!-- <h1>分类</h1> -->
    <van-tree-select
      height="100vh"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="right"
    >
      <template #content>
        <div
          height="100vh"
          :v-if="active == n"
          v-for="item in children[n - 1]"
          :key="item.id"
        >
          <div id="box_list" @click="jump(item.id)">
            <van-image
              round
              width="1.6rem"
              height="1.6rem"
              :src= "$pre + item.img"
            />
            <p>{{ item.catename }}</p>
            
          </div>
        </div>
        <!-- <div
          height="100vh" 
          v-show="!n"
          v-for="item in children"
          :key="item[0] "
        >

          <div v-for="i in item" :key="i.id">{{ i.catename }}</div>
        </div> -->
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 0,
      n: 0,
      items: [{ text: "全部" }],
      children: [],
    };
  },
  mounted() {
    axios({
      url: "/api/getcates",
      method: "get",
    }).then((res) => {
      console.log(res);
      res.data.list.forEach((item, index) => {
        this.items.push({ text: item.catename });
        this.children.push(item.children);
      });
    });
  },
  methods: {
    right(e) {
      console.log(e);
      this.n = e;
      // this.children = this.items[e].children
    },
    jump(i){
      this.$router.push("/list?type=2&id=" + i)
    }
  },
};
</script>

<style scoped>
#box_list{
  float: left;
  margin: 0.3rem;
}
#box_list p{
  text-align: center;
}
</style>